<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
{literal}
<style type="text/css">
body,html,div,iframe,ul,li{margin:0; padding:0;}
ul,ol{list-style:none;}
#gisMap{ height:720px;}
.list_item{ position: relative;font-size: 12px;cursor:pointer;padding:2px 0 4px 2px;border-bottom:1px solid #C1FFC1}
#changeCity{ text-align:center; background-color:#FFFFFF;border:#f2f2f2 solid 1px; padding:3px 10px; cursor:pointer;}
.area{position:absolute; top:0; left:100px; background-color:#FFF; width:300px; padding:5px; border:#e4e4e4 solid 1px; display:none;}
.area ul{display:none;}
.area ul.show{display:block;}
.area ul li{display:inline-block; padding:5px; text-align:left; text-decoration:underline; color:#666; cursor:pointer;cursor:pointer;}
</style>
{/literal}
<link href="ui/ui/css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet">
<script src="ui/ui/js/jquery.js"></script>
<script src="ui/ui/js/jquery-ui-1.10.3.custom.min.js"></script>
<title>POI管理</title>
</head>
<body>
	<p><form id="form_poi" action="" method="get"><label adcode="0" id="changeCity">选择城市</label><input type="text" name="search" value="金泰大厦" id="search"/><input type="submit" value="搜索"/>
    <input type="hidden" name="adcode" value="" id="adcode"/>
    <input type="hidden" name="city" value="" id="city"/>
    <input type="hidden" name="path" value="map"/>
    <input type="hidden" name="action" value="map"/>
    <input type="hidden" name="method" value="search"/>
    </form></p>
	<div id="gisMap"><iframe id="gis" src="?path=map&action=map&method=amap" width="610" height="400" scrolling="no" frameborder="0"></iframe></div>
    <ul class="ui-autocomplete" id="autocomplete" tabindex="0" aria-disabled="false"></ul>
</body>
</html>
{literal}
<script type="text/javascript" language="javascript">
var CMap, map;
getPrvoince();
$.fn.inputComplete = function (options) {
	var defaults = {
		city: '北京'
	};
	options = $.extend(defaults, options);
	return this.each(function () {
		var $this = $(this);
		$this.on('input', function () {
			map.autoComplete(this.value, options.city, function (data){
				$this.autocomplete({minLength: 0, source: data.list||[]})
				$this.autocomplete('search', '');
			});
		});
	});
};
$("#gis").load(function(e){
	var gis = $("#gis");
	var position = {height:gis.height(),width:gis.width(),display:'block'}
	gis.contents().find("#imap").css(position);
	CMap = this.contentWindow.CMap;
    map = new CMap({
		server:'',//服务请求地址
		imgprefix:'ui/ui/images/',//图片路径
		level: 10,//设置地图缩放级别
		center:{lng:116.397428,lat:39.90923},//设置地图中心点
		zooms: [3, 18],//地图视野级别范围
		touchZoom: false,//是否支持手势缩放。
		resizeEnable: true,//是否监控地图容器发生变化
		doubleClickZoom: true,//双击放大地图
		scrollWheel: true//鼠标滚轮缩放地图
	});
	//$("#city").bind('blur',function(){ map.setCity(document.getElementById("city").value)});
    $('#search').inputComplete({city: '上海'});
	
	$("#changeCity").on("click",function(){
		var position = $(this).offset();
		position.top += 26;
		$(".area").show().css(position).find("ul.show").removeClass('show');
		$(".area #prvoince").addClass('show')
	});
});

function getPrvoince(){
	ajax('?path=map&action=map&method=getPrvoince',{},'GET',function(ret){
		if( ret.code == 1 ){
			var r = ret.city_list.city;
			var html = $.map(r,function(el,index){
				return "<li adcode=\""+el.adcode+"\">"+el.name_zh+"</li>";
			}).join('');
			var area = $("<div class=\"area\"></div>").html("<ul id=\"prvoince\" class=\"show\">"+html+'</ul>');
			$(document.body).append(area);
			$(".area").on('click',function(e){
				var _t = $(e.target || e.srcElement);
				if ( _t.get(0).tagName != "LI" ) {return false;}
				if( _t.parent().attr('id') == 'prvoince' ){
					getCity(_t.attr('adcode'));
				}else{
					changeCity(_t.attr('adcode'),_t.html());
				}
			});
		}else{
			alert(ret.message);	
		}
	})	
}
function changeCity(adcode,cityName){
	$("#changeCity").attr('adcode',adcode).html(cityName);
	map.setCity(adcode);
	$('#search').inputComplete({city:cityName});
	$(".area").hide();
	$("#form_poi #adcode").val(adcode);
	$("#form_poi #city").val(cityName);
}
function getCity(adcode){
	var _t = $("#A"+adcode);
	if( _t.size() > 0 ){
		$(".area ul.show").removeClass('show');
		_t.addClass('show');
		return false;
	}
	ajax('?path=map&action=map&method=getCity',{adcode:adcode},'GET',function(ret){	
		if( ret.code == 1 ){
			var r = ret.city_list.city;
			var html = $.map(r,function(el,index){
				return "<li adcode=\""+el.adcode+"\">"+el.name_zh+"</li>";
			}).join('');
			$(".area").append("<ul id=\"A"+adcode+"\">"+html+"</ul>");
			getCity(adcode);
		}else{
			alert(ret.message);
		}
	});
}
function ajax(url,data,type,fn){
	url = '?path=map&action=map&method='+url;
	type = type || 'GET';
	$.ajax({url:url,data:data,type:type,contentType:"json",success: function(ret){
		if( ret.code == 1 ){
			fn && fn(ret);
		}
	},error:function(msg){
		//alert(ret.description);	
	}});
}
</script>
{/literal}
